<template>
	<view style="padding-top: 96rpx;">
		<view class="p_bg_f3 top_c">
			<view :class="{'active': tabNum === 0}" @click="tabNum = 0">领取优惠券</view>
			<!-- <view :class="{'active': tabNum === 1}" @click="tabNum = 1">分享赚钱</view> -->
		</view>
		<view class="p_over" v-if="tabNum === 0">
			<view class="p_over" v-if="listData.length === 0">
				<image src="https://dy.sykj365.com/uploads/mini/zanwuyouhuiquan@2x.png" class="p_img_128 none"></image>
				<view class="p_font_28 p_color_b2 p_flex7">无优惠券</view>
			</view>
			<ticket :tBtn="true" :item="item" v-for="item in listData" @getTicketBtn="getTicketBtn"></ticket>
		</view>
		<view class="wrapper" style="position: relative;" v-if="tabNum === 1">
			<view class="top_wrapper my_canvas" id="my-canvas">
				<image src="https://dy.sykj365.com/uploads/mini/bg@2x.png" class="bg my_draw_canvas" data-type="image"
					:data-url="'https://dy.sykj365.com/uploads/mini/bg@2x.png'"></image>
				<view class="top_content my_draw_canvas">
					<image src="https://dy.sykj365.com/uploads/mini/bg2@2x.png" mode="widthFix" class="bg2 my_draw_canvas"
						data-type="image" :data-url="'https://dy.sykj365.com/uploads/mini/bg2@2x.png'"></image>
					<view class="bg3_wrapper my_draw_canvas">
						<image src="https://dy.sykj365.com/uploads/mini/bg3@2x.png" class="bg3 my_draw_canvas" data-type="image"
							:data-url="'https://dy.sykj365.com/uploads/mini/bg3@2x.png'"></image>
						<view class="bg3_content p_font_40 p_text_c my_draw_canvas">
							<view class="my_draw_canvas" data-type="text" data-text="邀请好友下单打印">邀请好友下单打印</view>
							<view class="my_draw_canvas" data-type="text" data-text="返10%打印余额">返10%打印余额</view>
							<image :src="imgs" mode="widthFix" class="bg4 my_draw_canvas" data-type="image"
								:data-url="imgs">
							</image>
							<view class="p_flex7 my_draw_canvas">
								<view class="p_color_05b570 p_font_40 my_draw_canvas"
									style="border-radius: 12rpx;padding: 20rpx 28rpx;" data-type="text"
									data-text="在线打印 满9.9元包邮">在线打印 满9.9元包邮</view>
							</view>
							<view class="p_font_22 my_draw_canvas" style="color: #999;margin-top: 52rpx;"
								data-type="text" data-text="注意：70彩喷还有单面打印不参与活动">注意：70彩喷还有单面打印不参与活动</view>
						</view>
					</view>
				</view>
			</view>
			<view class="p_flex7 btn">
				<view class="p_font_28 p_flex7" @click="getSave">保存到相册</view>
			</view>
			<!-- 绘制图片 -->
			<canvas canvas-id="myCanvas" class="myCanvas" style="opacity: 0;"></canvas>
			<!--  -->
			<van-popup :show="isShow" @click-overlay="isShow = false">
				<view class="pop_content">
					<view class="p_font_32 p_text_c">请先打开相册权限</view>
					<button plain open-type="openSetting" class="p_btn" @opensetting="opensetting">
						<view>去打开</view>
					</button>
				</view>
			</van-popup>
		</view>
	</view>
</template>

<script>
	import Wxml2Canvas from 'wxml2canvas';
	import ticket from '../../components/ticket.vue';

	export default {
		components: {
			ticket,
		},
		data() {
			return {
				imgs: '',
				coverData: {},
				isShow: false,
				saveUrl: '',
				tabNum: 0,
				listData: [],
			}
		},
		onLoad(e) {
			this.getImgUrl();
			this.getTicketList();
			if(e.type) {
				this.tabNum = 1;
			}
		},
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: '打印5分/页，全国范围包邮',
				path: '/pages/index/index'
			}
		},
		methods: {
			getTicketList() {
				this.$http.post(this.$api.ticketList).then(res => {
					if (res.data.length > 0) {
						res.data.forEach((n, k) => {
							n.status = 0;
						})
					}
					this.listData = res.data;
				})
			},
			getTicketBtn(item) {
				this.$http.post(this.$api.receiveTicket, {
					id: item.id
				}).then(res => {
					getApp().getMsg('领取成功', 'success');
					setTimeout(() => {
						this.getTicketList();
					}, 1500)
				})
			},
			getImgUrl() {
				this.$http.post(this.$api.share).then(res => {
					this.imgs = res.data;
				})
			},
			getSave() {
				uni.showLoading();
				const that = this;
				const query = wx.createSelectorQuery().in(this);
				query.select('#my-canvas').fields({ // 选择需要生成canvas的范围
					size: true,
					scrollOffset: true
				}, data => {
					let width = data.width;
					let height = data.height;

					that.coverData = {
						width,
						height
					}

					setTimeout(() => {
						that.startDraw();
					}, 500);
				}).exec();
			},
			startDraw() {
				let that = this;

				// 创建wxml2canvas对象
				let drawMyImage = new Wxml2Canvas({
					element: 'myCanvas', // canvas的id,
					obj: that, // 传入当前组件的this
					width: that.coverData.width * 2,
					height: that.coverData.height * 2,
					background: '#fff', // 生成图片的背景色
					logging: false, // 日志
					scrollY: 0,
					scrollX: 0,
					useCORS: true, //跨域
					allowTaint: true,
					progress(percent) { // 进度
						// console.log(percent);
					},
					finish(url) { // 生成的图片
						console.log(url);
						that.saveUrl = url;
						uni.hideLoading();
						that.getDownImage();
					},
					error(res) { // 失败原因
						console.log(res);
						uni.hideLoading();
						uni.showToast({
							icon: 'error',
							title: '画图失败，请重试',
							duration: 2000
						});
					}
				}, this);
				let data = {
					// 获取wxml数据
					list: [{
						type: 'wxml',
						class: '.my_canvas .my_draw_canvas', // my_canvas要绘制的wxml元素根类名， **my_draw_canvas**单个元素的类名（所有要绘制的单个元素都要添加该类名）
						limit: '.my_canvas', // 要绘制的wxml元素根类名
						x: 0,
						y: 0
					}]
				}
				// 绘制canvas
				drawMyImage.draw(data, this);
			},
			getDownImage() {
				let self = this;
				uni.saveImageToPhotosAlbum({
					filePath: self.saveUrl,
					success: function() {
						getApp().getMsg('保存成功', 'success');
					},
					fail: function(res) {
						if (res.errMsg === 'saveImageToPhotosAlbum:fail auth deny') {
							// 拒绝了授权
							self.isShow = true;
						}
					}
				});
			},
			opensetting(e) {
				let s_ = e.detail.authSetting['scope.writePhotosAlbum'];

				if (s_) {
					this.getDownImage();
					this.isShow = false;
				}
			}
		}
	}
</script>

<style lang="less">
	.top_c {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		position: fixed;
		top: 0;
		z-index: 99;

		view {
			flex: 1;
			height: 96rpx;
			text-align: center;
			font-size: 28rpx;
			line-height: 96rpx;
			color: #7a7a7a;

			&.active {
				font-size: 32rpx;
				color: #222;
			}
		}
	}

	.wrapper {
		width: 100%;
		min-height: calc(100vh - 96rpx);
		overflow: hidden;
	}

	.myCanvas {
		width: 100%;
		height: 1334rpx;
	}

	.top_wrapper {
		width: 100%;
		position: absolute;
		height: 1334rpx;
		min-height: calc(100vh - 96rpx);

		.bg {
			width: 100%;
			height: 1334rpx;
			min-height: calc(100vh - 96rpx);
		}

		.top_content {
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			position: absolute;
		}

		.bg2 {
			width: 694rpx;
			height: 344rpx;
			margin: 16rpx auto;
		}

		.bg3_wrapper {
			width: 631rpx;
			height: 801rpx;
			margin: 0 auto;
			position: relative;
		}

		.bg3 {
			width: 631rpx;
			height: 801rpx;
		}

		.bg3_content {
			top: 113rpx;
			left: 0;
			right: 0;
			bottom: 0;
			position: absolute;
		}

		.bg4 {
			width: 240rpx;
			height: 240rpx;
			margin: 52rpx auto;
		}

		.bg_text {
			font-weight: bold;
			margin: 40rpx 0 24rpx;
		}

		.bg5 {
			width: 360rpx;
			height: 56rpx;
			line-height: 56rpx;
			text-align: center;
			background-color: #EBFFD5;
			font-weight: bold;
			margin: 0 auto 58rpx;
		}
	}

	.top_main {
		margin: 112rpx 84rpx auto 84rpx;
		background-color: #fff;
		border: 1px solid #000;
		border-radius: 56rpx;
	}

	.btn {
		z-index: 999999999;
		margin: 0 auto 28rpx;
		position: absolute;
		bottom: 0;
		width: 100%;

		view {
			color: #fff;
			width: 360rpx;
			height: 72rpx;
			border-radius: 56rpx;
			background: #05B570;
		}
	}

	.pop_content {
		width: 70vw;

		view {
			margin: 60rpx 0 50rpx;
		}

		.p_btn {
			width: 50%;
			margin-bottom: 60rpx;

			view {
				margin: 0;
			}
		}
	}

	.none {
		margin: 232rpx auto 32rpx;
	}

	.ticket_list {
		margin: 48rpx auto;
	}
</style>
